<template>
  <div class="user-info">
    <h2>User Information</h2>
    <p>Email: {{ userInfo.email }}</p>
    <p>VIP: {{ userInfo.vip ? 'Yes' : 'No' }}</p>
    <p>Disk Quota: {{ (userInfo.disk_quota / (1024 * 1024)).toFixed(2) }} MB</p>
    <p>Disk Usage: {{ (userInfo.disk_usage / (1024 * 1024)).toFixed(2) }} MB</p>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'UserInfo',
  data() {
    return {
      userInfo: {}
    }
  },
  async created() {
    try {
      const response = await axios.get('/info')
      this.userInfo = response.data
    } catch (error) {
      console.error('Failed to fetch user info:', error)
    }
  },
  mounted() {
    this.startHeartbeat()
  },
  methods:{
    startHeartbeat() {
      const sendHeartbeat = async () => {
        try {
          const response = await axios.get('/heartbeat')
          if (response.data.status !== 'ok') {
            ElMessage.error('Heartbeat failed')
          }
        } catch (error) {
          ElMessage.error('Error sending heartbeat'+ error.message)
        }
      }
      if(localStorage.getItem('accessToken')) {
        setInterval(sendHeartbeat, 30000)
      }
    }
  }
}
</script>

<style scoped>
.user-info {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>